<script setup lang="ts">
import { inject, reactive } from 'vue';
import { myStore } from '@/store/my';
import { resumeSkill } from '@/api/my';
import { showToast } from 'vant';
const { closeChange } = inject('popup') as any;
const store: any = myStore();
const state: any = reactive({
  value: '',
  show: false,
  skillList: [],
  sysSkill: [],
});
const setInfo = () => {
  if (store.resumeInfo.sys_skill_ids) {
    var arr = [];
    var skill = store.resumeInfo.sys_skill_ids.split(',');
    for (var i = 0; i < store.sysSkillList.length; i++) {
      var flag = false;
      for (var j = 0; j < skill.length; j++) {
        if (skill[j] === store.sysSkillList[i].title) {
          flag = true;
          break;
        }
      }
      arr.push({
        title: store.sysSkillList[i].title,
        active: flag,
      });
    }
    state.sysSkill = arr;
  }
  if (store.resumeInfo.skill_ids) {
    var arr = [];
    var skill = store.resumeInfo.skill_ids.split(',');
    for (var i = 0; i < skill.length; i++) {
      arr.push({
        title: skill[i],
        active: true,
      });
    }
    state.skillList = arr;
  }
};
if (store.sysSkillList.length === 0) {
  (async function () {
    await store.getLabelsSkill();
    setInfo();
  })();
} else {
  setInfo();
}
const skillChange = () => {
  state.skillList.push({
    title: state.value,
    acitve: false,
  });
  state.value = '';
  state.show = false;
};
const clearSkill = (index: any) => {
  state.skillList.splice(index, 1);
};
const setSkill = (index: any) => {
  state.skillList[index].active = !state.skillList[index].active;
};
const setSysSkill = (index: any) => {
  state.sysSkill[index].active = !state.sysSkill[index].active;
};
const submit = async () => {
  var arr = [];
  for (var i = 0; i < state.skillList.length; i++) {
    if (state.skillList[i].active) {
      arr.push(state.skillList[i].title);
    }
  }
  var sysArr = [];
  for (var j = 0; j < state.sysSkill.length; j++) {
    if (state.sysSkill[j].active) {
      sysArr.push(state.sysSkill[j].title);
    }
  }
  if (sysArr.length === 0) {
    showToast('请选择一项非自定义技能');
    return;
  }
  const res = await resumeSkill({
    skill_ids: String(arr),
    sys_skill_ids: String(sysArr),
  });
  if (res) {
    showToast('保存成功');
    closeChange();
  } else {
    showToast('保存失败');
  }
};
</script>
<template>
  <van-nav-bar title="技能关键词" left-arrow @click-left="closeChange" />
  <dl class="skill-list">
    <dt
      @click="setSysSkill(index)"
      v-for="(item, index) in state.sysSkill"
      :key="index"
      :class="item.active ? 'active' : ''"
    >
      {{ item.title }}
    </dt>
    <dt
      @click="setSkill(index)"
      v-for="(item, index) in state.skillList"
      :key="index"
      :class="item.active ? 'active' : ''"
    >
      {{ item.title }}
      <van-icon @click.stop="clearSkill(index)" name="close" />
    </dt>
    <dt @click="state.show = true">自定义+</dt>
  </dl>
  <van-dialog
    v-model:show="state.show"
    title="自定义标签"
    show-cancel-button
    @confirm="skillChange"
    @cancel="state.show = false"
  >
    <van-field
      class="skill-field"
      v-model="state.value"
      label=""
      placeholder="请输入标签"
      maxlength="10"
    />
  </van-dialog>
  <button class="wy-submit" @click="submit">保存</button>
</template>
<style scoped>
.skill-field {
  margin: 0 1rem;
}
.skill-list {
  padding: 1.31rem 1.09rem;
}
.skill-list dt {
  min-width: 4.5rem;
  height: 1.17rem;
  line-height: 1.17rem;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 0.27rem;
  font-size: 0.64rem;
  font-weight: 400;
  color: #333333;
  text-align: center;
  display: inline-block;
  margin: 0 0.64rem 0.8rem 0;
}
.skill-list dt.active {
  border: 1px solid #ff8e00;
  color: #ff8e00;
}
.skill-list dt i {
  margin-left: 0.2rem;
}
</style>
